CSS 盒阴影

阐述

盒阴影 box-shadow 可以帮助我们添加模拟现实生活的光影（影调）效果。其完整的语法为：

{
  box-shadow: [inset] <length> <length> <length> [<length>] <color>
}

分别指定了是否为内部阴影、横向偏移、纵向偏移、模糊半径、增长（可选的）以及颜色。增长是指均匀的缩小阴影物体的四边长度。

实例

<style>
  .card {
    box-shadow:
      2px 4px 8px hsl(0deg 0% 0% / 0.25);
  }
</style>

<article class="card">
  <h2>Hello World</h2>
</article>

性质

相关内容

与 CSS 滤镜中的阴影的区别

滤镜的优点

• 滤镜阴影采用了 Gaussian 模糊，其第三个数值指定的是标准差而非半径。这种模糊看起来更自然。
• 滤镜阴影将物体的边际线勾画出来然后加阴影，而非给长方形的盒子加阴影。这样它可以用来处理带透明的图片以及不规则的 DOM 元素，甚至一组元素

<style>
  .card {
    filter: drop-shadow(
      2px 4px 8px hsl(0deg 0% 0% / 0.4)
    );
  }
</style>

<article class="card">
  <h2>Hi!</h2>
  <div class="decoration one"></div>
  <div class="decoration two"></div>
</article>

盒阴影的优点

• 可以用来创造仅单边的阴影（将增长设为模糊的相反数）

<style>
  .box {
    --blur: 8px;
    --spread: calc(var(--blur) * -1);
    --offset: 12px;
    
    box-shadow:
      0px var(--offset)
      var(--blur) var(--spread)
      hsl(0deg 0% 0% / 0.2);
  }
</style>
<div class="box">
  Hello
</div>

参考文献